<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
    <style>
        ul>li{
            list-style-type: none
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <h1>The Goods Page</h1>
    <form>
        <ul>
            <li><input type="hidden" v-model="id"></li>
            <li>name</li>
            <li><input v-model="name"></li>
            <li>remark</li>
            <li><textarea v-model="remark" rows="3" cols="50"></textarea> </li>
            <li><input type="button" @click="doSaveOrUpdate" value="Save Goods"></li>
        </ul>
    </form>
<table class="table">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>remark</th>
        <th>createdTime</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="g in goods">
        <td>{{g.id}}</td>
        <td>{{g.name}}</td>
        <td>{{g.remark}}</td>
        <td>{{g.createdTime}}</td>
        <td><button v-on:click="deDeleteById(g.id)">删除</button></td>
        <td><button @click="doFindById(g.id)">修改</button></td>
    </tr>
    </tbody>
</table>
</div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            goods:{},
            name:"",
            remark:"",
            id:""
        },
        methods:{
            doFindById:function (id){
                var url="doFindById/"+id;
                axios.get(url)
                .then(function (res){
                    this.vm.id=res.data.id;
                    this.vm.name=res.data.name;
                    this.vm.remark=res.data.remark;
                })
                .catch()
            },
            doSaveOrUpdate:function (){
                var params={"id":this.id,"name":this.name,"remark":this.remark};
                var url=this.id?"doUpdateGoods":"doSaveGoods";
                axios.post(url,params)
                .then(function (res){
                    alert(res.data);
                    this.vm.id="";
                    this.vm.name="";
                    this.vm.remark="";
                    this.vm.doFindGoods();
                })
                .catch()
            },
            deDeleteById:function (id){
                var url="doDeleteById/"+id;
                axios.get(url)
                .then(function (res){
                    alert(res.data);
                    this.vm.doFindGoods();
                })
            },
            doFindGoods:function (){
                let url="/doFindGoods";
                axios.get(url)
                .then(function (res){
                    console.log(res.data);
                    this.vm.goods=res.data;
                })

            }
        },
        mounted:function (){
            this.doFindGoods();

        }
    });
</script>
</body>
</html>